<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		

	</head>
	<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
	<link rel="stylesheet" href="font/font-awesome-4.7.0/css/font-awesome.min.css" />
	<style type="text/css">
		body{
			font-size: 100px;
			/*background: black;*/
		}
		.test{
			/*font-family: "微软雅黑","黑体","宋体"*/
			
			/*font-weight: bold;*/
			/*font-style: italic;*//*控制斜体*/
			/*font-variant: small-caps;*//*控制西文字体，换转换成大写，但尺寸还是小写的*/
			/*
			 	无衬线字体 ...平直(大部分都用)
			 	
			 	有衬线字体...有小角
			 	
			 	Arial 传统 MAC WIN 都有 
			 	
			 * */
			
			/*
			 
			 * 用来设置文字体，
			 * 1. 可以传入多个值，用逗号隔开
			 * 2. 读取的顺序是左从右，如果左侧字体不存在，则读下一位，直到使用系统文字
			 * 3. 设置的时候，先建议西文字体，中文字体，win字体，Mac中文字体、通用的中文字体
			 * 
			 * 
			 * 假如设计中用到非主流字体
			 * 1.版权问题
			 * 2.考虑字体库的大小，西文库还可以(大小控制在300k),中文字体就劝其放弃。
			 * 
			 * 字体有版权
			 * 且中文字体库比较大 。
			 * */
			
			/*
			 	关于font-family的字体声明
			 	
			 	1.把西文字体写在前面，中文字体写在后
				2.考虑到具有中文系统但是学习英文的用户，写上中文字体的英文名字
				3.把 serif(衬体) 或 sans serif(无衬衣)写在最后
				4.建议顺序西文字体，中文字体，win字体，Mac中文字体、通用的中文字体
			 * */
			
			
			/*font-size:50px;  可以具体值 也可百分比 基于它的父元素的字体大小来计算*/
			font:italic small-caps bold 50% /100px "微软雅黑","黑体","宋体";
			
			/*font-style, font-variant, font-weight , font-size , line-height, font-family*/
		
			/*
			 	尽量不要小于12px
			 * */
		    /*
		     
		     * 行高 :可以传具体值， 也可以传百分比(基于当前元素的字体大小来计算)
		     * 
		     * line-height:100%; 表示设置当前的行高和字体大小一致 其实是大概有8个左右的像素
		     * */
		    
		    /*
		     #FF0000 红色   	
		      FF：红
		      00: 绿
		      00： 蓝
		      
		      rgb          
		      
		      白色：255,255,255
		      
		  	灰色#808080 #999999 #333333 #cccccc
		   
		   rgba：可以支持透明度的颜色值，透明度取值范围0-1之间
		   
		   1,单词模式
		   2,16进制模式
		   3，rgba模式
		   4，hsla模式
		   
		     * */
		    
		    /*
		     
		     * text-decoration: none
		     * text-decoration: underline: 文本上部的横线;
		     * text-decoration: line-through
		     * text-decoration: underline
		     * */
		
			/*
			 * 文字阴影
			 * X和Y值从本体开始算起
			 * 水平方向的位置
			 * 垂直方向的位置
			 * 模糊度，数值越高，模糊度越高，默认值为0
			 * 阴影颜色
			 text-shadow
			 
			 支持多阴影。
			 * */
			text-shadow:  0 0 20px #fefcc9, 
			10px -10px 30px #feec85, 
			-20px -20px 40px #ffae34,
			 20px -40px 50px #ec760c,
			  -20px -60px 60px #cd4606, 
			  0 -80px 70px #973716, 
			  10px -90px 80px #451b0e;
			  
			  font-family: tb;
		}
		@font-face {
			font-family:bgg;
			src: url(font/VDUB.ttf);
		}
		/*@font-face {
			font-family:tb;
			src: url('font/iconfont.eot'),;
				url('font/iconfont.eot?#iefix') format('embedded-opentype'),;
				url('font/iconfont.woff') format('woff'),
				url('font/iconfont.ttf') format('truetype'),
				url('font/iconfont.svg') format('svg');
				
		}*/
		
		.mypanda{
			font-size: 200px;
			text-shadow: 10px 10px 10px #ccc;
			/*
			 使用外部icon图标库
			 1.下载心仪的小图标
			 2. 把iconfont.css拷到自己目录下的CSS目录里
			 3. 把eot、svg、ttf、woff等字体库文件拷到项目目录下的font文件夹
			 4. 修改iconfont.css里的font-face引入路径
			 5. 在html页面中，link引入iconfont.css
			 6. 用如下代码使用即可
			 	<i class="iconfont icon-dog"><i>
			 7.如果要修改其颜色或大小，可以通过选中它，然后设置color、font-size
			 * */
		}
	</style>
	<body>
		<div class="test">测试字体bgg</div>
		<i class="iconfont icon-panda mypanda"></i>
		<i class="fa fa-search fa-2x"></i>
	</body>
</html>
